
import React, { useState, FC, ReactElement } from 'react';
// useRef, 
import { Row, Col, Input, Button } from 'antd';
import { ITodo } from '../typings';

interface IProps {
  addTodo: (todo: ITodo) => void;
  todoList: ITodo[];
}

const TdInput: FC<IProps> = ({
  addTodo, todoList
}): ReactElement => {
  let [value, setValue] = useState<string>('')
  // const inputRef = useRef<HTMLInputElement>(null)
  const changeValue = (e: any) => {
    setValue(e.target.value)
  }
  const addItem = ():void => {
    // const val: string = inputRef.current!.value.trim();
    const val: string = value.trim();
    if(val.length) {
      const isExist = todoList.find(todo => todo.content === val);
      if(isExist) {
        alert('已存在该项');
        return;
      }
      
      addTodo({
        id: new Date().getTime(),
        content: val,
        completed: false
      });

      // inputRef.current!.value = '';
      setValue('')
    }
  }

  return (
    <div className="todo-input">
      <Row>
        <Col span={18}>
          {/* ref={ inputRef } */}
          <Input type="text" placeholder="请输入代办项" maxLength={50} value={value} onChange={(e)=>changeValue(e)} onPressEnter={(e) => changeValue(e)} allowClear />
        </Col>
        <Col span={6}>
         <Button type="primary" onClick={ addItem }>增加</Button>
        </Col>
      </Row>
    </div>
  )
}

export default TdInput
